<script setup lang="ts">
import { ref } from 'vue'
import post from '../../lib/post'
import { CaretTop, Search } from '@element-plus/icons-vue'   //导入图标
import { ElMessageBox } from 'element-plus';
import { log } from 'console';
let list = ref([]);     //列表
const pageNo = ref(0)  //页数
const pageSize = ref(10)  //页距
const total = ref(0)  //总条数
const input1 = ref('')

const search = ref('')



const getList = async () => {

    const data: any = await post('/list/cart', {
        pageNo: pageNo.value,
        pageSize: pageSize.value,
        search:search.value
    });
    if (!data.success) {
        return alert(data.message);
    }
    list.value = data.result.list;
    total.value = data.result.total
};

const onPageChange = (page: number) => {
    pageNo.value = page - 1
    getList()
}
const handleSizeChange = (sizes: number) => {
    pageNo.value = 0
    pageSize.value = sizes
    getList();
}
const refreshList = () => { // 刷新列表
    pageNo.value = 0;
    list.value = [];
    getList(); // 重新拉取列表
}
const handleEdit = (index: number, row: any) => {
    // console.log(index,row);
    detailRef.value.showModify(index, row)
}


// 删除
const handleDelete = async (index: number, row: any) => {
    // console.log(index,row);
    const flag = await ElMessageBox.confirm('是否确认删除？')
    if (flag !== 'confirm') {
        return
    }

    const data: any = await post("/remove/goods", { id: row.id });
    if (!data.success) {
        return ElMessageBox.alert(data.message);
    }
    ElMessageBox.alert("删除成功");
    refreshList();
}


const exportExcel = () => {
    // 去下载文件
    // 创建新的隐藏的可点击元素
    const element = document.createElement("a");

    // 给这个元素设置‘href’属性，以指向你想下载的文件
    element.setAttribute("href", `http://localhost:5188/excel/goods?filename=人员表`);

    // 隐藏该元素
    element.style.display = "none";
    document.body.appendChild(element);

    // 模拟点击这个元素
    element.click();

    // 清理 - 从 DOM 中删除元素
    document.body.removeChild(element);
};






getList();


</script>

<template>
    <div class="bigBox">
        <div class="top">
            <div class="search">
                <div class="mt-4">
                    <el-input v-model="search" placeholder="请输入搜索内容" class="input-with-select">

                        <template #append>
                            <el-button :icon="Search" @click="getList"/>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="addContent">
                <el-button type="primary" @click="exportExcel()">导出excel</el-button>
            </div>
        </div>
        <div class="bigBox">
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="image" label="商品主图" width="auto">
                    <template #default="scope">
                        <el-image style="width: 60px; height: 60px;" :src="scope.row.goods.image"
                            :preview-src-list="[scope.row.goods.image]" preview-teleported fit="cover" lazy />
                    </template>
                </el-table-column>

                <el-table-column prop="goodsId" label="商品Id" width="auto" />
                <el-table-column prop="goods.name" label="商品标题" width="auto" />
                <el-table-column prop="goods.text" label="商品描述" width="auto" />
                <el-table-column prop="goods.originPrice" label="原价" width="auto" />
                <el-table-column prop="goods.price" label="现价" width="auto" />
                <el-table-column prop="count" label="商品数量" width="auto" />
                
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pageControl">
                <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="total" :page-size="pageSize"
                    @size-change="handleSizeChange" @current-change="onPageChange" :page-sizes="[5, 10, 15, 20]" />

            </div>
        </div>
    </div>
</template>

<style scoped>
.bigBox {
    width: 100%;
}

.top {
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    align-items: center;
    background-color: #f3f3f3;
}

.input-with-select {
    width: 300px;
}

.bigBox {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.pageControl {
    margin: 40px auto;
}
</style>